{template 'app_common/header'}

<link rel="stylesheet" href="{KB_APP_JS}/weui/weui.min.css"/>

<script>
    document.title = '创建客服工单';
    var order_id = "{$_GPC['order_id']}";
    if (order_id.length != 0) {
        document.title = '修改工单';
    }
</script>

<style>
    .weui-cell{
        margin-top: 0.24rem;
        padding: 0!important;
    }
    .weui-cell:before{
        border:none;
    }
    .weui-uploader__input-box{
        border: none;
        background-image: url("{KB_APP_IMG}/phone.png");
        background-size: 100% 100%;
    }
    .weui-uploader__input-box:before{
        width: 0;
        height: 0;
    }
    .weui-uploader__input-box:after{
        width: 0;
        height: 0;
    }
    .weui-uploader__files li {
        border-radius: 5px;
        overflow: hidden;
    }
    .g-scrollview:after{
        height:0;
    }
    .js_counter{
        float: right;
        color: #999;
        padding-right: 0.2rem;
    }
    body>span{display: none}
</style>

<body style="background-color: #f5f5f5">

<section class="g-flexview">
    <div class="g-scrollview">
        <div class="m-celltitle" style="margin-top: 0.2rem">选择分类</div>
        <div class="m-cell" style="margin-bottom: .2rem">
            <div class="cell-item">
                <label class="cell-right cell-arrow" style="border-bottom: 1px solid #D9D9D9;">
                    <select class="cell-select cat_id" name="cat_id" style="margin-bottom: 0;padding-left: 0.1rem; margin-top: 0">
                        <option value="0">请选择一级分类</option>
                        {if $category_list}
                        {loop $category_list $index $item}
                            <option value="{$item['cat_id']}" {if $detail['cat_id'] == $item['cat_id']}selected{/if} >{$item['cat_name']}</option>
                        {/loop}
                        {/if}
                    </select>
                </label>
            </div>
            <div class="cell-item">
                <label class="cell-right cell-arrow">
                    <select class="cell-select child_cat_id" name="child_cat_id" style="margin-bottom: 0;padding-left: 0.1rem">
                        <option value="0">请选择更详细的分类，便于更快解答您的疑问</option>
                        {if $child_category_list}
                        {loop $child_category_list $index $item}
                        <option value="{$item['cat_id']}" {if $item['cat_id'] == $detail['child_cat_id']}selected{/if}>{$item['cat_name']}</option>
                        {/loop}
                        {/if}
                    </select>
                </label>
            </div>
        </div>
        <div class="m-celltitle">具体疑问</div>
        <div class="m-cell changecell">
            <div class="cell-item">
                <div class="cell-right">
                    <textarea class="cell-textarea" id="area" maxlength="800" name="textarea" placeholder="请在800字内描述您的疑问，我们将尽快地解答，稍后将有微信消息通知您解答结果~" >{$detail['content']}</textarea>
                </div>
            </div>
            <div style="color: #999;float: right;padding: 0 0.2rem"><span id="num">0</span>/800</div>
        </div>
        <div class="scPic clear" style="padding-right: 0; padding-left: .3rem; padding-top: .4rem">
            <div class="filebox clear">

                <!--weui图片上传-->
                <div class="weui-gallery" id="gallery">
                    <span class="weui-gallery__img" id="galleryImg"></span>
                    <div class="weui-gallery__opr">
                        <a href="javascript:" class="weui-gallery__del">
                            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                        </a>
                    </div>
                </div>

                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__bd">
                                <ul class="weui-uploader__files" id="uploaderFiles">
                                    {if $detail['pic']}
                                    {loop $detail['pic'] $index $pic}
                                    <li class="weui-uploader__file" style="background-image:url({php echo tomedia($pic)})"><input type="hidden" value="{$pic}" data-input="1"></li>
                                    {/loop}
                                    {/if}
                                </ul>
                                <div class="weui-uploader__input-box">
                                    <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="multiple" {if $device_type == 'android'}capture="camera"{/if}/>
                                </div>
                            </div>
                            <div class="js_counter"><span class="countNowPic"></span>/<span class="allowMaxPic"></span></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="creatGd">
        <div style="display: flex;">
            <button type="button" class="btn-block btn-primary" id="submitBtn" style="margin-right: 10px; padding:0;margin-top: 0">提交</button>
            <a class="btn-block btn-hollow" href="{php echo $this->createMobileUrl('index', array('act' => 'index'))}" style="margin-top: 0">取消</a>
        </div>
        {template 'app_common/footer'}
    </div>
</section>

<script src="{KB_APP_JS}/jquery-3.2.1.min.js"></script>
<script src="{KB_APP_JS}/ydui.flexible.js"></script>
<script src="{KB_APP_JS}/ydui.js"></script>

<!--weui-->
<script src="{KB_APP_JS}/weui/jquery-weui.min.js"></script>

<script>
    countNowPic = $('#uploaderFiles li').length;
    $('.countNowPic').text(countNowPic);
    // 最大上传图片数量
    maxCount = 9;
    if (countNowPic >= maxCount) {
        $('.weui-uploader__input-box').css('display', 'none');
    }
    $('.allowMaxPic').text(maxCount);

    //weui多图上传
    $(function(){
        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        // 最大4M
        var maxSize = 1024 * 1024 * 4;

        var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function(e){
            var files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                window.YDUI.dialog.notify('没有选中文件', 1000);return;
            }

            for (var i = 0, len = files.length; i < len; i++) {
                var file = files[i];
                fileType = file.type;
                var reader = new FileReader();

                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {
                    window.YDUI.dialog.notify('该类型不允许上传', 1000);
                    return;
                }
                if (file.size > maxSize) {
                    window.YDUI.dialog.notify('上传图片不能超过4M，请重新选择', 1000);
                    return;
                }

                reader.onload = function (f) {
                    var img = new Image();
                    img.onload = function (i) {
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = img.width;
                        canvas.height = img.height;
                        var opt = (file.size > 1024 * 1024) ? 0.65 : 0.92;
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var base64  = canvas.toDataURL(fileType, opt);

                        // 插入到预览区
                        var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(' + base64  + ')"><div class="weui-uploader__file-content">0%</div><input type="hidden" value="'+base64+'"></li>');
                        $uploaderFiles.append($preview);

                        var num = $uploaderFiles.find('li').length;
                        $('.countNowPic').text(num);//当前有几张图片
                        if (num == maxCount) {
                            $('.weui-uploader__input-box').css('display', 'none');
                        }
                        if (num > maxCount) {
                            window.YDUI.dialog.notify('最多只能上传'+maxCount+'张图片', 1000);
                        }

                        var progress = 0;
                        function uploading() {
                            $preview.find('.weui-uploader__file-content').text(++progress + '%');
                            if (progress < 100) {
                                setTimeout(uploading, 20);
                            } else {
                                $preview.removeClass('weui-uploader__file_status').find('.weui-uploader__file-content').remove();
                            }
                        }
                        setTimeout(uploading, 20);
                    };
                    img.src = f.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function(){
            index = $(this).index();
            $('.creatGd').css('display', 'none');
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
            $('.creatGd').css('display', 'block');
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            if ($uploaderFiles.find("li").eq(index).find('input').attr('data-input') === '1') {
                //删除图片的物理路径
                var pic_path = $uploaderFiles.find('li').eq(index).find('input').val();
                $.post("{php echo $this->createMobileUrl('order', array('act' => 'delPic'))}", {order_id: "{$detail['order_id']}", pic: pic_path}, function (data) {
                    if (data.code !== 200) {
                        return false;
                    }
                });
            }
            $('.countNowPic').text($uploaderFiles.find('li').length - 1);
            $uploaderFiles.find("li").eq(index).remove();
            if ($uploaderFiles.find('li').length < maxCount) {
                $('.weui-uploader__input-box').css('display', 'block');
            }
            $('.creatGd').css('display', 'block');
        });
    });
</script>

<script type="text/javascript">
    $(function () {
        var deviceH = document.documentElement.clientHeight+"px";
        $("body").attr("style","width:100%;height:"+deviceH+";");

        var flag = true;
        $('#submitBtn').on('click', function () {
            if (flag === false) {
                window.YDUI.dialog.notify('您的操作太频繁了', 1000);
                return false;
            }
            var cat_id = $('select[name=cat_id]').val();
            var child_cat_id = $('select[name=child_cat_id]').val();
            var content = $('textarea[name=textarea]').val();
            if ($('.countNowPic').text() > maxCount) {
                window.YDUI.dialog.notify('最多只能上传'+maxCount+'张图片', 1000);
                return false;
            }
            var pic = [];
            $('#uploaderFiles li input').each(function (index, el) {
                pic.push($(el).val());
            });
            if(cat_id == 0){
                window.YDUI.dialog.notify('请选择一级分类', 1000);
                return false;
            }
            if(content === ''){
                window.YDUI.dialog.notify('请输入具体疑问', 1000);
                return false;
            }
            var data = {
                cat_id: cat_id,
                child_cat_id: child_cat_id,
                content: content,
                order_id: "{$_GPC['order_id']}",
                pic: pic
            };

            $.post("{php echo $this->createMobileUrl('order', array('act' => 'create'))}", data, function (data) {
                flag = false;
                window.YDUI.dialog.notify(data.msg, 1000);
                if (data.code === 200) {
                    setTimeout(function () {
                        window.location.href = "{php echo $this->createMobileUrl('order', array('act' => 'waitingDetail'))}&order_id=" + data.order_id;
                    }, 1000)
                } else {
                    return false;
                }
            });
        });

        //获取二级分类
        $('.cat_id').change(function () {
            $('.child_cat_id').html('<option value="0">请选择更详细的分类，便于更快解答您的疑问</option>');
            var cat_id = $(this).val();
            if (cat_id > 0) {
                $.get("{php echo $this->createMobileUrl('order', array('act' => 'getChildCate'))}&cat_id="+cat_id, function (data) {
                    if (data.total > 0) {
                        var html = '';
                        $.each(data.child_category_list, function (index, item) {
                            html += '<option value="' + item.cat_id + '">' + item.cat_name + '</option>';
                        });
                        $('.child_cat_id').append(html);
                    } else {
                        return false;
                    }
                });
            }
        });

        isLock = false;//是否锁定当前的输入状态
        //输入即可触发【不区分中文和英文】
        document.querySelector('#area').addEventListener('input',function(){
            //只有在非中文输入状态的时候，才能更改数字
            if(!isLock){
                var num = this.value.length;
                $('#num').text(num);
            }
        })
    });
</script>

</body>
</html>